<template>
    <div>
        <el-dialog title="附加属性" :close-on-click-modal="false" :visible.sync="showDialog" :before-close="handleClose">
            <div style="margin: 20px;"></div>
            <el-form :model="modelForm" ref="modelForm" label-width="100px"  style="max-height:300px;overflow-y: auto">
                <el-form-item label=" " prop=""   v-for="(item,index) in paramList" style="padding-right: 55px;width:90%">
                    <el-input placeholder="请输入属性名称" v-model="item.name" :maxlength="50" style="width:93%;float: left">
                        <template slot="prepend">
                            <el-button tabIndex="-1">名称{{index+1}}</el-button>
                        </template>
                        <template slot="append" v-if="index!=0"><i class="el-icon-delete" @click="delCode(index)"></i></template>
                    </el-input>
                    <div  @click="addCode()" style="width:7%;float: right"><i class="el-icon-plus" style="font-size: 22px;color:#20a0ff;padding-left: 15px;"></i></div>
                </el-form-item>
            </el-form>
            <div class="foot-bar-button">
                <el-button type="primary" @click="submitForm('modelForm')">提交</el-button>
                <el-button @click="resetForm('modelForm')">取消</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
    //注意路径
    export default{
        props: ['isShow'],  //参数
        data(){
            return {
                 showDialog:false,
                modelForm:{},
                paramList:[{name:"",value:""}],
              storeId:window.localStorage.getItem("dishKuId")

            };
        },
        watch:{
            isShow:function(newValue,oldValue){
                this.showDialog=newValue;
              if(newValue){
                this.$axios.get("dishes/dishess/queryDishesExtends?storeId="+this.storeId).then(res=>{
                  if(res.status==200){
                    this.paramList=res.content;
                    if(this.paramList.length<=0){
                      this.paramList=[{name:"",value:""}]
                    }

                  }

                },res=>{})
              }

            }
        },
        created(){
            window.this = this;
        },
        methods: {
            addCode(){
                this.paramList.push({name:"",value:""});
            },
            delCode(index){
                if(this.paramList.length>1){
                    this.paramList.splice(index,1);
                }else{
                    this.$message.info("最少保留一条");
                }
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
                this.$emit('close');
                this.showDialog=false;
            },
           handleClose(done){
            this.$emit('close');
             this.showDialog=false;
            done();
          },
            submitForm() {
                for(var i=0;i<this.paramList.length;i++){
                    if(this.paramList[i].name=='' && this.paramList.length>1){
                        this.paramList.splice(i,1);
                    }
                }
                var ary = this.paramList;
                var nary=ary.sort();
                for(var i=0;i<ary.length;i++){
                    if(i>=ary.length-1){
                        break;
                    }
                    if (nary[i].name!='' && nary[i+1].name!='' && nary[i].name==nary[i+1].name){
                        this.$message.error("属性名称不能重复");
                        return;
                    }
                }
              var  data={};
              data.storeId=this.storeId;
                data.details=this.paramList;
              this.$axios.post("dishes/dishess/saveDishesExtends",data,"json").then(res=>{
                if(res.status==200){
                  this.showDialog=false;
                  this.$emit("addSuccess",this.paramList);
                }
              },res=>{})

            },
        }
    }
</script>
<style scoped>

</style>
